<template>
    <div class="complaint-proposal-background">
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                 <div class='complaint-proposal-msg'>请输入联系人</div>
                    <van-field class='complaint-proposal-field' v-model="saveData.contractPerson" placeholder="联系人" error-message="" @blur='showTabbar()' @focus='hiddenTabbar()'  />                   
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                <div class='complaint-proposal-msg'>请输入联系电话</div>
                <van-field class='complaint-proposal-field' :disabled='phoneSys' v-model="saveData.contractPhone" placeholder="联系电话" error-message=""  @blur='showTabbar()' @focus='hiddenTabbar()'/>                
            </van-col>
        </van-row>
        <van-row type="flex" justify="space-around">
            <van-col span="24">
                 <div class='complaint-proposal-msg'>请输入存在问题</div>
                    <van-field style='min-height: 80px' class='complaint-proposal-field' v-model="saveData.existQuestion" type="textarea" placeholder="存在问题" rows="1" autosize  @blur='showTabbar()' @focus='hiddenTabbar()'/>                   
            </van-col>
        </van-row>
        <van-row style='margin-bottom: 50px'>
            <div class='complaint-proposal-msg'>上传照片</div>
             <van-col span="4" style='height: 77px;margin: 3px;'>
               <upload @img="onRead"></upload>
            </van-col>
            <!--  <van-col span="4" style='height: 77px;margin: 3px;'>
               <upload @img="onRead"></upload>
            </van-col>
            <van-col span="4" style='height: 77px;margin: 3px;'>
               <upload @img="onRead"></upload>
            </van-col> -->
        </van-row>
        <van-tabbar v-show='tabbarSign'>
            <van-tabbar-item class='complaint-proposal-tabbar' @click.native='save()'>上报</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script >
import { Toast } from 'vant';
import { ComplaintAdviceService } from './api';
import {getUserInfo} from './utils'
export default {
    name: 'complaintProposal',
    data() {
        return {   
            tabbarSign:true,
            phoneSys:false,         
            saveData:{
                contractPerson:'',
                contractPhone:'',
                existQuestion:'',
                picStr:'',
                openId:'',
                phoneNumber:''
            } 
        };
    },
    created() {       
        getUserInfo(this.$route.query.code).then((res)=>{
            this.saveData.openId=res.openid;
            if(res&&res.phoneNo){
            this.saveData.contractPhone=res.phoneNo;
            this.saveData.phoneNumber=res.phoneNo;            
            this.phoneSys=true;
            }           
        })
    },
    methods: {
        onRead(data) {
            this.saveData.picStr=data.content;
        },
        save(){
            ComplaintAdviceService.saveComplaintAdvice(this.saveData).then((res) => {
               Toast.success('上报成功');        
            }, (err) => {
                Toast.fail('上报失败');
            });           
        },
        showTabbar(){
            this.tabbarSign=true;
        },
        hiddenTabbar(){
            this.tabbarSign=false;
        },
    },
};
</script>
<style>
.complaint-proposal-background {
    position: absolute;
    top: 20px;
    left: 0px;
    height: 100vh;
    padding: 20px;
    width: 90%
     
}

.complaint-proposal-field {
    border: 1px solid black;
    border-radius: 8px;
    margin-bottom: 15px; 
}

.complaint-proposal-msg {
    margin: 10px 10px 5px;
}

.complaint-proposal-img {
    width: 98%;
    height: 98%;
    margin: 6px;
}

.complaint-proposal-uploader {
    border: 1px solid black;
    width: 98%;
    height: 98%;
    margin: 6px;
    display: table;
    text-align: center;
}

.complaint-proposal-uploadericon {
    font-size: 50px;
    margin: 50px 100px;
    display: table-cell;
    vertical-align: middle;
}

.complaint-proposal-tabbar {
    background: #30AFF7;
    color: #FFFFFF;
    font-size: 20px;
}

</style>
